<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2021-12-13 10:24:29
 * @LastEditors: younghxp
 * @LastEditTime: 2021-12-22 16:22:38
-->
<template>
  <div class="container">
    <topTitle
      :titleText="titleText"
      :back="true"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon">
      <el-form
        :model="formData"
        :rules="formRules"
        ref="formData"
        label-width="100px"
        class="demo-ruleForm"
      >
        <div class="secondaryTitle secondaryTitleTheme mrB18">巡查模板配置</div>
        <el-form-item prop="templateId" label="巡查模板" label-width="135px">
          <el-select
            clearable
            filterable
            placeholder="请选择巡查模板"
            class="proInputWidth"
            v-model="formData.templateId"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in patrolTempArr"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-divider></el-divider>
        <div class="secondaryTitle secondaryTitleTheme mrB18 mrT24">
          完成期限
        </div>
        <el-form-item label="完成期限" label-width="135px" prop="expectedTime">
          <el-date-picker
            type="date"
            placeholder="请选择完成期限"
            v-model="formData.expectedTime"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-divider></el-divider>
        <div class="secondaryTitle secondaryTitleTheme mrB18 mrT24">
          巡查项目配置
        </div>
        <div style="padding-left: 24px">
          <div style="margin-bottom: 24px">
            <el-button
              class="commonBut saveBtn funComBut bzjAddJc"
              icon="icon iconfont icontianjia"
              @click="goAddProject"
            >
              <span class="opetareText">添加项目</span>
            </el-button>
          </div>
          <el-table
            :data="proList"
            v-loading="loading"
            :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
            highlight-current-row
            stripe
            style="border: 1px solid #dfe6ec"
            max-height="300"
          >
            <el-table-column
              type="index"
              width="80"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="projectName"
              label="项目名称"
              min-width="150"
              :key="2"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="areaName"
              label="区域"
              align="center"
              min-width="100"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="industryName"
              label="行业"
              min-width="170"
              align="center"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="investmentDesc"
              label="投资类型"
              min-width="170"
              align="center"
              :key="3"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="statusDesc"
              label="状态"
              align="center"
              :key="6"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              prop="gradeLevel"
              label="项目评级"
              align="center"
              min-width="120"
              :key="5"
              :formatter="formatTd"
            ></el-table-column>
            <el-table-column
              label="操作"
              prop="hasFile"
              min-width="110"
              align="left"
            >
              <template slot-scope="scope">
                <el-link type="primary" @click="del(scope.$index)"
                  >删除</el-link
                >
              </template>
            </el-table-column>
            <!-- 表格数据为空时，页面显示 -->
            <div slot="empty" v-if="isShow">
              <emptyTable emptyText="暂无相关数据"></emptyTable>
            </div>
          </el-table>
        </div>
        <div class="btnBox">
          <el-button
            size="medium"
            class="saveBtn submitBtn"
            @click="saveForm('formData')"
            :loading="isSaveLoading"
            v-sdc
            >确认</el-button
          >
          <el-button size="medium" class="cancelBtn cancelSty" @click="goBack()"
            >取消</el-button
          >
        </div>
      </el-form>
    </div>
    <addProject
      v-if="isShowAddProject"
      @closeDialog="hiddenDialog"
      isFjOrJs="CS"
      :proList="proList"
      @changeData="getProList"
    ></addProject>
  </div>
</template>

<script>
import addProject from '@/components/inspectionTask/addProject'

export default {
  name: 'CustomPatrolAdd',
  components: {
    addProject,
  },
  data() {
    return {
      titleText: '创建巡查任务',
      formData: {
        templateId: '',
        expectedTime: '',
      },
      formRules: {
        templateId: [
          { required: true, message: '巡查模板不能为空', trigger: 'change' },
        ],
        expectedTime: [
          { required: true, message: '请选择完成期限', trigger: 'change' },
        ],
      },
      patrolTempArr: [],
      proList: [], //添加项目数据
      isShow: false, //列表加载
      isShowAddProject: false, //添加项目弹框
      isSaveLoading: false,
    }
  },
  created() {
    this.getPatrolTemp()
  },
  methods: {
    /**
     * @description: 获取巡查模板
     * @param {*}
     * @return {*}
     */
    getPatrolTemp() {
      this.axios({
        method: 'post',
        url: 'api-gov/pcipqc/template/all',
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.patrolTempArr = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    saveForm(formName) {
      if (this.proList.length == 0) {
        this.$message({
          message: '请先配置任务项目',
          type: 'warning',
        })
        return
      }
      if (this.proList.length > 30) {
        this.$message({
          message: '企业列表最多配置30条',
          type: 'warning',
        })
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitForm()
        } else {
          return false
        }
      })
    },
    /**
     * @description: 提交表单
     * @param {*}
     * @return {*}
     */
    submitForm() {
      this.isSaveLoading = true
      const idList = this.proList.map((v) => v.id)
      this.formData.projectIds = this.packageParams(idList)
      this.axios({
        method: 'post',
        url: 'api-gov/pcipqc/task/add',
        data: this.formData,
      })
        .then((response) => {
          this.isSaveLoading = false
          if (!response.data.hasError) {
            this.$message.success('保存成功')
            this.goBack()
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          this.isSaveLoading = false
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    goBack() {
      this.$router.push({
        path: '/home/gridPatrol/patrolTask',
        name: 'patrolTask',
        query: {
          activeName: 'second',
        },
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/gridPatrol/patrolTask',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    /**
     * @description: 添加项目弹框
     * @param {*}
     * @return {*}
     */
    goAddProject() {
      this.isShowAddProject = true
    },
    hiddenDialog() {
      this.isShowAddProject = false
    },
    /**
     * @description: 获取子组件选中的项目
     * @param {*}
     * @return {*}
     */
    getProList(data) {
      this.proList = data
    },
    del(index) {
      this.proList.splice(index, 1)
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  .mainCon {
    top: 198px;
    padding: 24px;
    .infoTitle {
      font-size: 16px;
      padding: 16px 24px;
      background: #f5f7fb;
      margin-bottom: 24px;
      color: #333;
      font-weight: 700;
    }
    .proInputWidth {
      width: 230px;
    }
    .btnBox {
      text-align: center;
    }
    .cancelSty {
      margin-top: 50px;
      margin-bottom: 30px;
    }
  }
}
</style>
